<template>
    <div id="login-div">
        <a-row >
            <a-col :span="8" offset="8">
                <h2 id="title">Welcome to Zhcache</h2>
            </a-col>
        </a-row>
        <a-row id="container" >
            <a-col :span="8" id="login" offset="8">
                <a-form
                        id="login-form"
                        :form="form"
                        class="login-form"
                        @submit="submit"
                >
                    <!--username-->
                    <a-form-item>
                        <a-input
                                v-decorator="['username',{ rules: [{ required: true, message: 'Please input your username!' }] }]"
                                placeholder="Username"
                        >
                            <a-icon
                                    slot="prefix"
                                    type="user"
                                    style="color: rgba(0,0,0,.25)"
                            />
                        </a-input>
                    </a-form-item>
                    <!--passwd-->
                    <a-form-item>
                        <a-input
                                v-decorator="['password',{ rules: [{ required: true, message: 'Please input your passwordd!' }] }]"
                                placeholder="Password"
                                type="password"
                        >
                            <a-icon
                                    slot="prefix"
                                    type="lock"
                                    style="color: rgba(0,0,0,.25)"
                            />
                        </a-input>
                    </a-form-item>

                    <a-form-item>
                        <a-button
                                type="primary"
                                html-type="submit"
                                class="login-form-button"
                        >
                            Login
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import AFormItem from "ant-design-vue/es/form/FormItem";

    export default {
        name: "Login",
        components: {AFormItem, ACol, ARow},
        beforeCreate() {
            this.form = this.$form.createForm(this);
        },
        methods: {
            submit(e) {
                e.preventDefault(); //住址默认event
                // eslint-disable-next-line no-console
                console.log('login', 'stop send login reuqest');
                //获取值
                this.form.validateFields((err, values) => {
                    if (!err) {
                        //用户验证正确
                        if (values.username == "admin" && values.password =="admin") {
                            // eslint-disable-next-line no-console
                            console.log('login','success to jump');

                            //路由跳转
                            this.$router.push('/main');

                            this.successinfo();
                        } else {
                            // eslint-disable-next-line no-console
                            console.log("login", "sigin in error")
                            this.errinfo()
                        }
                    }
                });
            },
            errinfo(){
                this.$message.error('Username or Password is error');
            },
            successinfo(){
                this.$message.success("sigin in is success")
            }
        },
        data() {
            return {}
        }
    }
</script>

<style scoped>
    #login-form .login-form-button {
        width: 100%;
    }

    #login-div {
        margin-top: 400px;
    }

    #title{
        text-align: center;
        font-size: 50px;
        font-weight: bold;
    }




</style>